<template>
  <div class="page-container" v-loading="isMaskShow">
    <div class="btn-box">
      <el-button type="primary" @click="getluckysheetfile"
        >展示表格数据</el-button
      >
      <el-button type="primary" @click="downloadExcel">导出excel</el-button>

      <el-button type="primary" @click="saveLocal">保存JSON 序列化数据到本地</el-button>
      <el-button type="primary" @click="loadLocal">加载本地缓存JSON 序列化数据</el-button>

      加载file 文件格式：<input style="font-size: 16px" type="file" @change="uploadExcel" />

      <div style="margin-top:10px">
        加载file Url 格式
        <select v-model="selected" @change="selectExcel">
          <option disabled value="">Choose</option>
          <option
            v-for="option in options"
            :key="option.text"
            :value="option.value"
          >
            {{ option.text }}
          </option>
        </select>
      </div>
    </div>
    <div id="luckysheet"></div>
  </div>
</template>

<script>
import { exportExcel } from "./js/export";
import LuckyExcel from "luckyexcel";
export default {
  mounted() {
    this.init();


  },
  data() {
    return {
      options: [
        {
          text: "Money Manager.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx",
        },
        {
          text: "Activity costs tracker.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx",
        },
        {
          text: "House cleaning checklist.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx",
        },
        {
          text: "Student assignment planner.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx",
        },
        {
          text: "Credit card tracker.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx",
        },
        {
          text: "Blue timesheet.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx",
        },
        {
          text: "Student calendar (Mon).xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx",
        },
        {
          text: "Blue mileage and expense report.xlsx",
          value:
            "https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx",
        },
      ],
      selected: "",
      isMaskShow: false,
    };
  },

  methods: {
    init() {
      var options = {
        container: "luckysheet", // 设定DOM容器的id
        title: "Luckysheet Demo", // 设定表格名称
        lang: "zh", // 设定表格语言
        // plugins: ["chart"],
        // data: [
        //   {
        //     name: "sheet1", //工作表名称
        //     color: "#eee333", //工作表(工作表名称底部边框线)颜色
        //     index: 0, //工作表索引(新增一个工作表时该值是一个随机字符串)
        //     status: 1, //激活状态
        //     order: 0, //工作表的下标
        //     hide: 0, //是否隐藏
        //     row: 36, //行数
        //     column: 10, //列数
        //     defaultRowHeight: 28, //自定义行高,单位px
        //     defaultColWidth: 100, //自定义列宽,单位px
        //     celldata: [], //初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
        //     config: {
        //       merge: {}, //合并单元格
        //       rowlen: {}, //表格行高
        //       columnlen: {}, //表格列宽
        //       rowhidden: {}, //隐藏行
        //       colhidden: {}, //隐藏列
        //       borderInfo: {}, //边框
        //       authority: {}, //工作表保护
        //     },

        //     scrollLeft: 0, //左右滚动条位置
        //     scrollTop: 0, //上下滚动条位置
        //     luckysheet_select_save: [], //选中的区域
        //     calcChain: [], //公式链
        //     isPivotTable: false, //是否数据透视表
        //     pivotTable: {}, //数据透视表设置
        //     filter_select: {}, //筛选范围
        //     filter: null, //筛选配置
        //     luckysheet_alternateformat_save: [], //交替颜色
        //     luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
        //     luckysheet_conditionformat_save: {}, //条件格式
        //     frozen: {}, //冻结行列配置
        //     chart: [], //图表配置
        //     zoomRatio: 1, // 缩放比例
        //     image: [], //图片
        //     showGridLines: 1, //是否显示网格线
        //     dataVerification: {}, //数据验证配置
        //   },
        // ],
        // showtoolbar: true, // 工具栏
        // showtoolbarConfig: {
        //   undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
        //   paintFormat: true, //格式刷
        //   currencyFormat: true, //货币格式
        //   percentageFormat: true, //百分比格式
        //   numberDecrease: true, // '减少小数位数'
        //   numberIncrease: true, // '增加小数位数
        //   moreFormats: true, // '更多格式'
        //   font: true, // '字体'
        //   fontSize: true, // '字号大小'
        //   bold: true, // '粗体 (Ctrl+B)'
        //   italic: true, // '斜体 (Ctrl+I)'
        //   strikethrough: true, // '删除线 (Alt+Shift+5)'
        //   underline: true, // '下划线 (Alt+Shift+6)'
        //   textColor: true, // '文本颜色'
        //   fillColor: true, // '单元格颜色'
        //   border: true, // '边框'
        //   mergeCell: true, // '合并单元格'
        //   horizontalAlignMode: true, // '水平对齐方式'
        //   verticalAlignMode: true, // '垂直对齐方式'
        //   textWrapMode: true, // '换行方式'
        //   textRotateMode: true, // '文本旋转方式'
        //   image: true, // '插入图片'
        //   link: true, // '插入链接'
        //   chart: true, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
        //   postil: true, //'批注'
        //   pivotTable: true, //'数据透视表'
        //   function: true, // '公式'
        //   frozenMode: true, // '冻结方式'
        //   sortAndFilter: true, // '排序和筛选'
        //   conditionalFormat: true, // '条件格式'
        //   dataVerification: true, // '数据验证'
        //   splitColumn: true, // '分列'
        //   screenshot: true, // '截图'
        //   findAndReplace: true, // '查找替换'
        //   protection: true, // '工作表保护'
        //   print: false, // '打印'
        // },
        // showsheetbar: true, //是否显示底部sheet页按钮
        // showsheetbarConfig: {
        //   add: true, //新增sheet
        //   menu: true, //sheet管理菜单
        //   sheet: true, //sheet页显示
        // },
        // showinfobar: true, //是否显示顶部信息栏
        // showstatisticBar: false, //是否显示底部计数栏
        // showstatisticBarConfig: {
        //   count: false, // 计数栏
        //   view: false, // 打印视图
        //   zoom: true, // 缩放
        // },
        // sheetFormulaBar: false, //是否显示公式栏
        // allowCopy: false, //是否允许拷贝
        // enableAddRow: true, //允许添加行
      };

      // 初始化表格   初始化后 存在 window.luckysheet
      luckysheet.create(options);
    },
    // 加载 url 方式
    selectExcel(evt) {
      console.log("evt", evt);
      const value = this.selected;
      const name = evt.target.options[evt.target.selectedIndex].innerText;
      console.log("value name", value, name);
      if (value == "") {
        return;
      }
      this.isMaskShow = true;

      LuckyExcel.transformExcelToLuckyByUrl(
        value,
        name,
        (exportJson, luckysheetfile) => {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert(
              "Failed to read the content of the excel file, currently does not support xls files!"
            );
            return;
          }
          this.isMaskShow = false;
          window.luckysheet.destroy();
          window.luckysheet.create({
            container: "luckysheet", //luckysheet is the container id
            showinfobar: false,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
          });
        }
      );
    },
    // 第一次加载
    loadLocal() {
      const fileData = JSON.parse(localStorage.getItem("testFile"));
      console.log("fileData", fileData);
      if (!fileData) return;

      window.luckysheet.destroy();
      window.luckysheet.create({
        container: "luckysheet", // 设定DOM容器的id
        title: "Luckysheet Demo22", // 设定表格名称
        lang: "zh", // 设定表格语言
        data: fileData,
        // functionButton:
        //   '<button id="savemodel" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">保存模板</button>',
      });
    },
    // 展示表格数据
    getluckysheetfile() {
      console.log("window", window);
      console.log("getluckysheetfile", luckysheet.getluckysheetfile());
      console.log("getAllSheets data", luckysheet.getAllSheets());
    },
    saveLocal() {
      const data = luckysheet.getAllSheets();
      console.log("getAllSheets data", data);
      const JSONData = JSON.stringify(data);
      console.log("getAllSheets JSONData", JSONData);
      localStorage.setItem("testFile", JSONData);
      console.log('保存成功');
    },
    // 导出
    downloadExcel() {
      luckysheet.exitEditMode();
      const fileName = "luckySheet 导出文件";
      exportExcel(window.luckysheet.getAllSheets(), fileName);
    },
    uploadExcel(evt) {
      const files = evt.target.files;
      if (files == null || files.length == 0) {
        alert("No files wait for import");
        return;
      }
      const _this = this;

      let name = files[0].name;
      let suffixArr = name.split("."),
        suffix = suffixArr[suffixArr.length - 1];
      if (suffix != "xlsx") {
        alert("Currently only supports the import of xlsx files");
        return;
      }

      _this.isMaskShow = true;
      LuckyExcel.transformExcelToLucky(
        files[0],
        function (exportJson, luckysheetfile) {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert(
              "Failed to read the content of the excel file, currently does not support xls files!"
            );
            return;
          }
          window.luckysheet.destroy();

          window.luckysheet.create({
            container: "luckysheet", //luckysheet is the container id
            showinfobar: false,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
          });

          _this.isMaskShow = false;
        }
      );
    },
  },
  beforeDestroy() {
    window.luckysheet.destroy();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  .btn-box {
    height: 20%;
  }
  #luckysheet {
    height: 80%;
  }
}
</style>
